<template>
  <div style="width: 1200px;max-width: 1200px;margin: 0 auto;height: 100vh;">
    <div class="container" style="display: flex;justify-content: space-between;padding-top: 10px;">
      <router-link to="/main/renshi/kaoqing/kqguanli" style="">返回</router-link>
      <span style="display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;">
        <span @click="printForm">打印</span>
        <span @click="saveData">保存</span>
        <router-link to="/main/renshi/kaoqing/churu-list" style="">列表</router-link>
      </span>
    </div>
    <div class="main-form">
      <h2>员工临时出入登记表</h2>
      <table border="1">
        <thead>
          <tr>
            <th>序号</th>
            <th>日期</th>
            <th>工号</th>
            <th>姓名</th>
            <th>事由</th>
            <th>起始时间</th>
            <th>终止时间</th>
            <th>备注</th>
            <th class="add" v-if="!isView">添加记录</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in records" :key="index">
            <td>{{ index + 1 }}</td>
            <td><input v-model="record.date" type="date" :disabled="isView" /></td>
            <td><input v-model="record.employeeId" :disabled="isView" /></td>
            <td><input v-model="record.name" :disabled="isView" /></td>
            <td><input v-model="record.reason" :disabled="isView" /></td>
            <td><input v-model="record.startTime" type="time" :disabled="isView" /></td>
            <td><input v-model="record.endTime" type="time" :disabled="isView" /></td>
            <td><input v-model="record.remark" :disabled="isView" /></td>
          </tr>
          <tr v-if="!isView">
            <td></td>
            <td><input v-model="newRecord.date" type="date" /></td>
            <td><input v-model="newRecord.employeeId" /></td>
            <td><input v-model="newRecord.name" /></td>
            <td><input v-model="newRecord.reason" /></td>
            <td><input v-model="newRecord.startTime" type="time" /></td>
            <td><input v-model="newRecord.endTime" type="time" /></td>
            <td><input v-model="newRecord.remark" /></td>
            <td class="add"><button @click="addRecord">添加记录</button></td>
          </tr>
        </tbody>
      </table><br>
      <p>注：此表仅限于因公事出入事业部，在公司内活动。</p>
      <p style="display: flex;justify-content: space-between;">
        <span>表单编号及版本：AM-JY-194 B/0</span> 
        <span>保存期限：长期</span>
      </p>
    </div>
  </div>
</template>

<script>
import { saveDengjiEmployeeAccess, getDengjiEmployeeAccessDetail } from '@/api/dengjiEmployeeAccess';

export default {
  data() {
    return {
      records: [],
      newRecord: {
        id: null,
        date: '',
        employeeId: '',
        name: '',
        reason: '',
        startTime: '',
        endTime: '',
        remark: ''
      },
      isEdit: false,
      isView: false
    };
  },
  created() {
    const id = this.$route.query.id;
    const type = this.$route.query.type;

    if (id) {
      if (type === 'edit') {
        this.isEdit = true;
      } else if (type === 'view') {
        this.isView = true;
      }
      this.fetchData(id);
    }
  },
  methods: {
    printForm() {
      window.print()
    },
    async fetchData(id) {
      try {
        const response = await getDengjiEmployeeAccessDetail(id);
        if (response.data.data) {
          const data = response.data.data;
          if (this.isEdit || this.isView) {
            this.records = [{
              id: data.id,
              date: data.date,
              employeeId: data.employeeId,
              name: data.name,
              reason: data.reason,
              startTime: data.startTime,
              endTime: data.endTime,
              remark: data.remark
            }];
          }
        }
      } catch (error) {
        this.$message.error('获取数据失败：' + error.message);
      }
    },
    validateRecord(record) {
      if (!record.date) {
        this.$message.warning('日期不能为空');
        return false;
      }
      if (!record.employeeId) {
        this.$message.warning('工号不能为空');
        return false;
      }
      if (!record.name) {
        this.$message.warning('姓名不能为空');
        return false;
      }
      if (!record.reason) {
        this.$message.warning('事由不能为空');
        return false;
      }
      if (!record.startTime) {
        this.$message.warning('起始时间不能为空');
        return false;
      }
      if (!record.endTime) {
        this.$message.warning('终止时间不能为空');
        return false;
      }
      return true;
    },
    addRecord() {
      if (this.validateRecord(this.newRecord)) {
        this.records.push({ ...this.newRecord });
        this.newRecord = {
          id: null,
          date: '',
          employeeId: '',
          name: '',
          reason: '',
          startTime: '',
          endTime: '',
          remark: ''
        };
      }
    },
    async saveData() {
      try {
        if (this.records.length === 0) {
          throw new Error('请至少添加一条记录');
        }

        // 不再区分编辑和新增模式，统一使用saveDengjiEmployeeAccess
        await saveDengjiEmployeeAccess(this.records);
        this.$message.success(this.isEdit ? '更新成功' : '保存成功');
        this.$router.push('/main/renshi/kaoqing/churu-list');
      } catch (error) {
        this.$message.error('保存失败：' + error.message);
      }
    }
  }
};
</script>

<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  white-space: nowrap;
}

input {
  border: none;
}

@media print {

  /*@page规则被用来设置打印页面的方向为横向*/
  // @page {
  //   size: landscape;
  // }
  .container {
    display: none !important;
  }

  .add {
    display: none;
  }

  .page-header {
    .header-actions {
      display: none;
    }
  }

  .main-form {
    max-width: 1000px;
  }

  table {
    margin: 10px 0px;
  }

  .info-table,
  .content-table,
  .approval-table {
    border: 1px solid #000;

    td,
    th {
      border: 1px solid #000;
    }
  }

  td,
  th {
    padding: 5px;
    border: 1px solid #000;
  }

  input {
    border: none !important;
    background-color: transparent !important;
    text-align: center;
  }

  textarea {
    border: 0px !important;
  }
}
</style>